<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title th:text="#{screen.success.header}">Generic Success View</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main role="main" class="container mt-3 mb-3">
    <div layout:fragment="content" class="row">
        <div class="w-100 m-auto mdc-card p-4 text-justify">
            <h2>
                <i class="mdi mdi-door-open"></i>
                <span th:utext="#{screen.success.header}">Log In Successful</span>
            </h2>
            <p th:utext="#{screen.success.success(${authentication.principal.id})}">You, <strong>username</strong>, have successfully logged into the Central Authentication Service.
                However, you are seeing this page because CAS does not know about your target destination and how
                to get you there. Examine the authentication request again and make sure a target service/application that is authorized and registered with CAS is specified.</p>

            <p th:utext="#{screen.success.security}">
                When you are finished, for security reasons, please <a href="logout">log out</a> and exit your web browser.
            </p>

            <p th:unless="${#maps.isEmpty(authentication.principal.attributes)}">
                The following attributes and services are resolved and available for <strong th:utext="${authentication.principal.id}" />:
            
                <div id="attribute-tabs" class="mdc-tab-bar" role="tablist">
                    <div class="mdc-tab-scroller">
                        <div class="mdc-tab-scroller__scroll-area">
                            <div class="mdc-tab-scroller__scroll-content">
                                <button class="mdc-tab" role="tab" aria-selected="true">
                                    <span class="mdc-tab__content">
                                        <span class="mdc-tab__text-label">Principal</span>
                                    </span>
                                    <span class="mdc-tab-indicator">
                                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                                    </span>
                                    <span class="mdc-tab__ripple"></span>
                                </button>
                                <button class="mdc-tab" role="tab" aria-selected="true">
                                    <span class="mdc-tab__content">
                                        <span class="mdc-tab__text-label">Authentication</span>
                                    </span>
                                    <span class="mdc-tab-indicator">
                                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                                    </span>
                                    <span class="mdc-tab__ripple"></span>
                                </button>
                                <button th:if="${authorizedServices}" class="mdc-tab" role="tab" aria-selected="true">
                                    <span class="mdc-tab__content">
                                        <span class="mdc-tab__text-label">Services</span>
                                    </span>
                                    <span class="mdc-tab-indicator">
                                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                                    </span>
                                    <span class="mdc-tab__ripple"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <section id="attribute-tab-0" class="attribute-tab">
                    <div class="w-100 mdc-data-table mx-auto my-4" id="divPrincipalAttributes" role="tabpanel" aria-labelledby="attributes-tab">
                        <table id="attributesTable" class="mdc-data-table__table" style="white-space: unset">
                            <thead>
                            <tr class="mdc-data-table__header-row">
                                <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Attribute</th>
                                <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Value(s)</th>
                               
                            </tr>
                            </thead>
                            <tbody class="mdc-data-table__content">
                            <tr th:each="attribute : ${authentication.principal.attributes}" class="mdc-data-table__row">
                                <td class="mdc-data-table__cell"><code><kbd th:utext="${attribute.key}"/></code></td>
                                <td class="mdc-data-table__cell">
                                    <code><kbd th:utext="${#strings.abbreviate(attribute.value, 80)}"/></code>
                                </td>
                            </tr>
                            
                            </tbody>
                        </table>
                    </div>
                </section>

                <section id="attribute-tab-1" class="d-none attribute-tab">
                    <div class="w-100 mdc-data-table mx-auto my-4" id="divAuthenticationAttributes" role="tabpanel" aria-labelledby="attributes-tab">
                        <table id="attributesTable" class="mdc-data-table__table" style="white-space: unset">
                            <thead>
                            <tr class="mdc-data-table__header-row">
                                <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Attribute</th>
                                <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Value(s)</th>
                            
                            </tr>
                            </thead>
                            <tbody class="mdc-data-table__content">
                        
                            <tr th:attr="id=${attribute.key}"
                                th:each="attribute : ${authentication.attributes}" class="mdc-data-table__row">
                                <td class="mdc-data-table__cell attribute-key"><code><span th:utext="${attribute.key}"/></code></td>
                                <td class="mdc-data-table__cell attribute-value">
                                    <code><kbd th:utext="${#strings.abbreviate(attribute.value, 80)}"/></code>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </section>

                <section id="attribute-tab-2" class="d-none attribute-tab" th:if="${authorizedServices}">
                    <div class="w-100 mdc-data-table mx-auto my-4" id="divAuthorizedServices" role="tabpanel" aria-labelledby="attributes-tab">
                        <table id="attributesTable" class="mdc-data-table__table" style="white-space: unset">
                            <thead>
                            <tr class="mdc-data-table__header-row">
                                <th class="mdc-data-table__header-cell" role="columnheader" scope="col"></th>
                                <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Service</th>
                                <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Description</th>

                            </tr>
                            </thead>
                            <tbody class="mdc-data-table__content">

                            <tr th:each="service : ${authorizedServices}" class="mdc-data-table__row">
                                <td class="mdc-data-table__cell">
                                    <i class="mdi mdi-web" th:unless="${service.logo}"></i>
                                    <img th:src="${service.logo}" width="26px" height="26px" th:if="${service.logo}" />
                                </td>
                                <td class="mdc-data-table__cell">
                                    <a th:id="${'service' + service.id}" th:title="${service.name}" th:alt="${service.description}" th:utext="${service.name}" />

                                    <script th:inline="javascript">
                                        /*<![CDATA[*/
                                        let serviceId = /*[[${service.serviceId}]]*/ ;
                                        if (isValidURL(serviceId)) {
                                            let id = /*[[${'service' + service.id}]]*/ ;
                                            $("a#" + id).attr("href", serviceId);
                                        }
                                        /*]]>*/
                                    </script>
                                </td>
                                <td class="mdc-data-table__cell">
                                    <span th:utext="${service.description}"/>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </section>
            </p>
        </div>
        

        <script type="text/javascript" th:inline="javascript">
            let divs = ["divPrincipalAttributes", "divAuthenticationAttributes", "divAuthorizedServices"]
            divs.forEach(id => {
                let div = document.querySelector('#' + id);
                if (div != null) {
                    new mdc.dataTable.MDCDataTable(div);
                }
            })
            
            $(function() {
                tabify(mdc);
            });
            
            function tabify(material) {
                var elm = document.getElementById('attribute-tabs');
                var tabs = material.tabBar.MDCTabBar.attachTo(elm);

                tabs.listen('MDCTabBar:activated', function (ev) {
                    var index = ev.detail.index;
                    $('.attribute-tab').addClass('d-none');
                    $('#attribute-tab-' + index).removeClass('d-none');
                });

                tabs.foundation.adapter.activateTabAtIndex(0);

                return tabs;
            }

        </script>
    </div>
</main>
</body>
</html>
